.layoutContainer {
  background: #f8f6f3;
  min-height: 100vh;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.topCard {
  background: #5a3a22;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  padding: 28px 0 18px 0;
  color: #fff;
  box-shadow: 0 2px 12px #0002;
  position: relative;
}
.topTitleRow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 600;
  margin-left: 24px;
}
.topTabs {
  display: flex;
  gap: 12px;
  margin: 22px 0 0 24px;
}
.topTab {
  background: #7c5a3a;
  color: #fff;
  border-radius: 18px;
  padding: 8px 28px;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  outline: none;
  transition: background 0.2s;
}
.topTabActive {
  background: #fff;
  color: #5a3a22;
}
.topSearch {
  margin: 18px 24px 0 24px;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 2px 12px #0002;
  padding: 0 18px;
  height: 48px;
}
.topSearch input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 18px;
  padding: 14px 0;
  color: #4a3a2c;
}
.topSearchIcon {
  width: 26px;
  height: 26px;
  background: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%234a3a2c" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>') center/contain no-repeat;
  margin-left: 8px;
}
.browseRow {
  display: flex;
  align-items: center;
  margin: 24px 0 0 0;
  padding: 0 18px;
  justify-content: space-between;
}
.browseTitle {
  font-size: 17px;
  font-weight: 600;
  color: #4a3a2c;
}
.browseAll {
  color: #b6d36b;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
.browseIcons {
  display: flex;
  gap: 18px;
  margin: 18px 0 0 0;
  padding: 0 18px;
}
.browseIconWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.browseIconCircle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
}
.browseIconPurple { background: #b7aaff; }
.browseIconGreen { background: #b6d36b; }
.browseIconRed { background: #ff6b6b; }
.browseIconYellow { background: #ffe066; color: #bfa800; }
.browseIconOrange { background: #ff9800; }
.browseIconText {
  font-size: 15px;
  color: #4a3a2c;
  margin-top: 2px;
}
.suggestCard {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px #e6e2d8;
  padding: 18px 18px 12px 18px;
  margin: 18px 18px 0 18px;
}
.suggestTitle {
  font-size: 16px;
  font-weight: 600;
  color: #4a3a2c;
  margin-bottom: 10px;
}
.suggestDoctorCard {
  background: #f8f6f3;
  border-radius: 14px;
  display: flex;
  align-items: center;
  padding: 12px 12px;
  gap: 12px;
  box-shadow: 0 1px 4px #ecebe7;
  margin-bottom: 10px;
}
.suggestAvatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #eee;
  object-fit: cover;
}
.suggestDocInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.suggestDocNameRow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  color: #4a3a2c;
}
.suggestDocStar {
  color: #ffe066;
  font-size: 16px;
}
.suggestDocScore {
  font-size: 14px;
  color: #b0a99a;
  margin-left: 2px;
}
.suggestDocType {
  font-size: 14px;
  color: #b0a99a;
  margin-left: 8px;
}
.suggestDocMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #b0a99a;
  margin: 2px 0 0 0;
}
.suggestDocDesc {
  font-size: 14px;
  color: #b0a99a;
  margin: 2px 0 0 0;
}
.suggestDocStars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 4px 0 0 0;
}
.suggestMatch {
  background: #e6f7e6;
  color: #4a3a2c;
  border-radius: 16px;
  padding: 7px 14px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 2px;
}
.suggestMatchIcon {
  color: #6db36d;
  font-size: 18px;
}
.suggestMatchPercent {
  color: #2e9e4a;
  font-weight: 600;
  font-size: 15px;
}
.allDoctorsTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px 18px 0 18px;
}
.allDoctorsTitle {
  font-size: 16px;
  font-weight: 600;
  color: #4a3a2c;
}
.allDoctorsSort {
  color: #b6d36b;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
}
.allDoctorsList {
  margin: 10px 18px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.allDoctorCard {
  background: #f8f6f3;
  border-radius: 14px;
  display: flex;
  align-items: center;
  padding: 10px 10px;
  gap: 10px;
  box-shadow: 0 1px 4px #ecebe7;
}
.allDoctorAvatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eee;
  object-fit: cover;
}
.allDoctorInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.allDoctorNameRow {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 600;
  color: #4a3a2c;
}
.allDoctorStar {
  color: #ffe066;
  font-size: 15px;
}
.allDoctorScore {
  font-size: 13px;
  color: #b0a99a;
  margin-left: 2px;
}
.allDoctorType {
  font-size: 13px;
  color: #b0a99a;
  margin-left: 6px;
}
.allDoctorMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #b0a99a;
  margin: 2px 0 0 0;
}
.allDoctorStars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 4px 0 0 0;
}
